<html>
  <head>
    <title>CSS3</title>
    <style>
      body {
        margin: 0;
      }
      .rgba {
        width: 100px;
        height: 10px;
        background-color: rgba(0, 0, 255, 1);
      }
      .translate {
        width: 100px;
        height: 50px;
        background: green;
        transform: translate(200px, 10px);
      }
      .matrix {
        width: 100px;
        height: 50px;
        background: green;
        transform: matrix(1, 0, 0, 1, 200, 10);
      }
      .skew {
        width: 100px;
        height: 50px;
        background: green;
        transform: skew(0deg, 20deg);
      }
      @keyframes my-move {
        0% {
          transform: rotate(0deg);
          left: 0px;
        }
        50% {
          transform: rotate(-360deg);
          left: 500px;
          background: #1ec7e6;
        }
        100% {
          transform: rotate(0deg);
          left: 0px;
        }
      }
      .animation {
        width: 50px;
        height: 50px;
        position: relative;
        background: green;
        animation: my-move 5s infinite;
      }
      .border-radius {
        width: 100px;
        height: 100px;
        background: green;
        border-radius: 10px 20px;
      }
      .box-shadow {
        width: 100px;
        height: 100px;
        box-shadow: 0 0 10px #000;
      }
      .text-shadow {
        text-shadow: 0 0 10px #000;
      }
      .linear-gradient {
        width: 100px;
        height: 100px;
        background: green;
        /* background-image: linear-gradient(to top right, red, yellow); */
        background-image: linear-gradient(red 5%, green 15%, blue 60%);
      }
      .border-image {
        width: 100px;
        height: 100px;
        border: 15px solid transparent;
        /* border-image: url(assets/border.png) 30 round; */
        border-image: url(https://picsum.photos/536/354) 30 round;
      }
      .flex-container {
        display: flex;
        justify-content: space-around;
      }
      .flex-item {
        /* flex: 1; */
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        background: #1ec;
      }
      .grid-container {
        display: grid;
        height: 200px;
        grid-template-columns: repeat(3, 1fr);
        /* grid-template-columns: 10% 80% 10%; */
        /* grid-template-columns: 200px 500px 200px; */
        /* grid-template-columns: repeat(3, minmax(200px, 1fr)); */
        /* grid-auto-rows: 200px; */
        /* grid-template-rows: 1fr 1fr 1fr; */
        grid-auto-flow: row;
      }
      .grid-item {
        /* width: 100px; */
        /* height: 100px; */
        /* line-height: 100px; */
        background-image: linear-gradient(to right, green, yellow);
        text-align: center;
        border-radius: 10px;
      }
    </style>
  </head>
  <body>
    <h1>RGBA</h1>
    <div class="rgba"></div>

    <h1>translate</h1>
    <div class="translate"></div>

    <h1>matrix</h1>
    <div class="matrix"></div>

    <h1>skew</h1>
    <div class="skew"></div>

    <h1>animation</h1>
    <div class="animation"></div>

    <h1>border-radius</h1>
    <div class="border-radius"></div>

    <h1>box-shadow</h1>
    <div class="box-shadow"></div>

    <h1>text-shadow</h1>
    <div class="text-shadow">text-shadow</div>

    <h1>linear-gradient</h1>
    <div class="linear-gradient"></div>

    <h1>border-image</h1>
    <div class="border-image"></div>

    <h1>flex</h1>
    <div class="flex-container">
      <div class="flex-item">A</div>
      <div class="flex-item">B</div>
      <div class="flex-item">C</div>
    </div>
    <h1>grid</h1>
    <div class="grid-container">
      <div class="grid-item">A</div>
      <div class="grid-item">B</div>
      <div class="grid-item">C</div>
      <div class="grid-item">D</div>
      <div class="grid-item">E</div>
      <div class="grid-item">F</div>
    </div>
  </body>
</html>
